<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="../libs/mui.min.css"/>
    <link rel="stylesheet" href="../css/main.css"/>
    <link rel="stylesheet" href="../css/mine-message.css"/>
    <style>
        .getPhoto {
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            display: block;
            top: 0;
        }

        #content-pic {
            position: relative;
        }
    </style>
</head>

<body>
<div class="head">
    <img src="../images/all-left.png" class="mui-action-back" style="height: 44px;padding: 0;top: 2px;left: 10px;">
    <p>个人信息</p>
</div>

<div class="content">
    <li id="content-pic">
        <span>更换头像</span>
        <div class="content-photo mine-photo"></div>
        <input type="file" class="getPhoto" onchange="FileReder_getphotos(this,'.mine-photo')"/>
    </li>
    <li>
        <span>更换姓名</span>
        <input type="text" id="name" placeholder="请输入姓名" maxlength="8"/>
    </li>
    <li class="logout-wrapper">
        <button id="logout">注销</button>
    </li>
</div>
</body>

<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../libs/mui.min.js"></script>
<script src="../js/url.js"></script>
<script src="../js/userInfo.js"></script>
<script src="../js/fill-in_getphotos.js"></script>
<script type="text/javascript">
    var uploadHead;
    $(function () {
        //获取用户信息
        var saveUser = new User();
        saveUser.getMessage();
        //注销
        $('#logout').on('tap', function (event) {
            event.stopPropagation();
            mui.confirm('确认注销？', '小马时贷', ['否', '是'], function (e) {
                if (e.index == 1) {
                    localStorage.removeItem('token');
                    localStorage.removeItem('personName');
                    href('./enter.html');
                }
            });
        });

        //更换姓名
        $('#name').blur(function () {
            // plus.nativeUI.showWaiting();
            $.ajax({
                type: "POST",
                url: ur + "rest/appUserController/update",
                async: true,
                headers: {
                    'X-token': localStorage.token
                },
                data: {
                    'nickName': $('#name').val()
                },
                dataType: 'json',
                success: function (data) {
                    if (data.meta.code == 'S002'){
                    }
                }
            });
        })

        uploadHead = function (imgPath){
            var imgType = $('.content-photo').attr('imgType');
            var image = new Image();
            image.style.width = "100px";
            image.style.height = "100px";
            image.src = imgPath;
            image.onload = function (){
                var imgData = getBase64Image(image);
                /*在这里调用上传接口*/
                mui.ajax(ur + "rest/appUserController/update", {
                    data: {
                        'img': imgData,
                        'FE': imgType,
                    },
                    beforeSend: function (req) {
                        req.setRequestHeader('X-Token', localStorage.token);
                    },
                    dataType: 'json',
                    type: 'post',
                    timeout: 10000,
                    success: function (data) {
                        console.log(data);
                        if (data.meta.code == 'S002') {
                            mui.toast('上传图像成功');
                        }
                    },
                    error: function (xhr, type, errorThrown) {
                        mui.toast('系统错误');
                    }
                });
            }
        }

        function getBase64Image(img){
            var canvas = document.createElement("canvas");
            var width = img.width;
            var height = img.height;
            canvas.width = width;
            /*设置新的图片的宽度*/
            canvas.height = height;
            /*设置新的图片的长度*/
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);
            /*绘图*/
            var dataURL = canvas.toDataURL("image/jpeg", 0.5);
            return dataURL.substring(dataURL.indexOf(',') + 1, dataURL.length); // 去除逗号及其前面的
        }
    })
</script>

</html>